<template>
	<!-- 歌手音乐人界面组件 -->
	<view>
		<view class="artist-zimu flex  mb-3 mt-5 flex-wrap">
			<t-btn color="base" size="text-sm h-5 opacity-30">全部</t-btn>
			<t-btn size="sm" ghost class="ml-3"
				v-for="i in ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']">
				{{i}}
			</t-btn>
		</view>
		<view class="artist-zimu mb-3">
			<t-btn color="base" size="text-sm h-5 opacity-30">全部</t-btn>
			<t-btn size="sm" ghost class="ml-3" v-for="i in ['国内','港台','欧美','韩国','日本','其他']">{{i}}
			</t-btn>
		</view>
		<view class="artist-list flex justify-between flex-wrap mt-10">
			<view class="mb-10 text-center" v-for="(item,index) in artistListArray" :key="index">
				<view class="artistPoster">
					<image class="rounded-full" :src="item.src" mode="aspectFill">
					</image>
				</view>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-artist",
		data() {
			return {
				artistListArray: [
					{
						name: "王菲",
						src: '../../static/imgs/artist/王菲.jpg'
					},
					{
						name: "戚薇",
						src: '../../static/imgs/artist/戚薇.jpg'
					},
					{
						name: "毛不易",
						src: '../../static/imgs/artist/毛不易.jpg'
					},
					{
						name: "何曼婷",
						src: '../../static/imgs/artist/何曼婷.jpg'
					},
					{
						name: "方大同",
						src: '../../static/imgs/artist/方大同.jpg'
					},
					{
						name: "Moonlight",
						src: '../../static/imgs/artist/Moonlight.jpg'
					},
					{
						name: "樱桃",
						src: '../../static/imgs/artist/樱桃.jpg'
					},
					{
						name: "GoFlex",
						src: '../../static/imgs/artist/goflex.jpg'
					},
					{
						name: "Wang",
						src: '../../static/imgs/poster-basic2.png'
					}
				]
			};
		},
		methods: {
			async randomMusic() {
				const db = uniCloud.database()
				const res = await db.collection('my-music').aggregate()
					.match({
						article_status: 1,
						// category_id: '61d6f08b97b9a00001f979b7'
					})
					.sample({
						size: 5
					})
					.end()
				console.log('随机获取的数据', res.result.data)
				this.$refs.myudb.dataList = res.result.data
			},

		}
	}
</script>

<style>
	.child-active {
		color: #99CC33;
		background-color: #99CC33;
		/* border-radius: 5rem; */
	}
	.artistPoster {
		border-radius: 9999px;
		width: 9rem;
		height: 9rem;
		margin-bottom: 1rem;
		overflow: hidden;
	}

	.artistPoster image {
		width: 9rem;
		height: 9rem;
		cursor: pointer;
		transition: all 0.6s;
	}

	.artistPoster image:hover {
		transform: scale(1.1);
	}
</style>
